<template>
  <div class="offline">
    <!-- 面包屑 -->
    <Headline
      :headline1="$t('m.AccessAdmin') + '  /  '"
      :headline2="$t('m.OfflineList')"
    ></Headline>
    <a-card style="width: 100%">
      <div class="lass-flex">
        <a-select
          style="width: 80px"
          class="select-a"
          default-value="1"
          @change="handleSelectChange"
        >
          <a-select-option
            :key="item.code"
            :value="item.code"
            v-for="item in selectData"
            >{{ item.name }}</a-select-option
          >
        </a-select>
        <a-tree-select
          v-model="value"
          show-search
          style="width: 20%; height: 32px; margin-left: 15px"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="Please select"
          allow-clear
          @change="checked"
          tree-default-expand-all
        >
          <a-tree-select-node
            v-for="item in items"
            :key="item.id"
            :cont="item"
            :value="item.custorgname"
            :title="item.custorgname"
          >
            <a-tree-select-node
              v-for="int in item.children"
              :key="int.id"
              :cont="int"
              :value="int.custorgname"
              :title="int.custorgname"
            >
              <a-tree-select-node
                v-for="ins in int.children"
                :key="ins.id"
                :cont="ins"
                :value="ins.custorgname"
                :title="ins.custorgname"
              />
            </a-tree-select-node>
          </a-tree-select-node>
        </a-tree-select>
        <a-select
          class="select-a"
          style="margin-left: 15px"
          v-model="fostlist.downStatus"
          @change="offSelectChange"
        >
          <a-select-option
            v-for="item in diction"
            :value="item.code"
            :key="item.code"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
        <a-input-search
          :placeholder="$t('m.PleaseEnterYourSearchTerms')"
          style="width: 200px; margin-left: 15px; margin-right: 15px"
          size="default"
          @search="offSearch"
          v-model="fostlist.key"
        />
        <a-checkbox
          style="margin-right: 15px"
          :defaultChecked="fostlist.vChild"
          @change="lineChange"
        >
          {{ $t("m.WhetherToDisplayChildNodes") }}
        </a-checkbox>

        <a-button type="primary" style="margin-right: 15px" @click="downbtn">{{
          $t("m.ReDownload")
        }}</a-button>
        <a-button
          type="primary"
          style="margin-right: 15px"
          @click="addbtn"
          icon="plus"
          >{{ $t("m.TheNewAuthorization") }}</a-button
        >
        <a-button
          type="primary"
          style="margin-right: 15px"
          @click="delbtn"
          icon="delete"
          >{{ $t("m.DeleteTheAuthorized") }}</a-button
        >
      </div>
      <a-table
        style="margin-top: 15px; overflow-x: auto"
        :rowKey="(r, i) => r.authorizeid"
        :columns="column"
        :data-source="datas"
        bordered
        :pagination="false"
        :row-selection="{
          onChange: perSelectChange,
          type: 'checkbox',
          selectedRowKeys: setsclete,
        }"
        :scroll="{ x: 2000 }"
      >
      </a-table>
      <a-pagination
        class="pages"
        show-size-changer
        :default-current="1"
        :total="total"
        @change="setPages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="setShowSizeChange"
      />
    </a-card>
    <a-modal
      :title="$t('m.SelectPersonnel')"
      width="800px"
   :cancelText="$t('m.Cancel')"
      :okText="$t('m.Ok')"
      :visible="visibleB"
      @cancel="handleCancelB"
      :footer="null"
    >
      <a-steps :current="current">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
      <div class="steps-content" v-if="current == 0 ? true : false">
        <select-tree style="margin-right: 20px" @checkData="changeTree" />

        <a-select
          style="width: 80px"
          class="select-a"
          default-value="1"
          @change="treeChange"
        >
          <a-select-option
            :key="item.code"
            :value="item.code"
            v-for="item in selectData"
            >{{ item.name }}</a-select-option
          >
        </a-select>
        <a-input-search
          :placeholder="$t('m.PleaseEnterYourSearchTerms')"
          v-model="forminitialB.key"
          style="width: 200px; margin-right: 20px; margin-left: 20px"
          enter-button
          @search="onSearchB"
        />
        <a-checkbox @change="onChangeA">
          {{ $t("m.WhetherToDisplayChildNodes") }}
        </a-checkbox>

        <a-transfer
          style="margin-top: 20px"
          :locale="{ itemUnit: '项', itemsUnit: '项' }"
          :data-source="mockData"
          :target-keys="targetKeys"
          :show-search="showSearch"
          :filter-option="
            (inputValue, item) => item.title.indexOf(inputValue) !== -1
          "
          :show-select-all="false"
          @change="onChange"
        >
          <template
            slot="children"
            slot-scope="{
              props: { direction, filteredItems, selectedKeys },
              on: { itemSelectAll, itemSelect },
            }"
          >
            <a-table
              :row-selection="
                getRowSelection({
                  selectedKeys,
                  itemSelectAll,
                  itemSelect,
                })
              "
              bordered
              :pagination="direction === 'left'?ipagination:Rightipagination"
              :columns="direction === 'left' ? leftColumns : rightColumns"
              :data-source="filteredItems"
            />
          </template>
        </a-transfer>
      </div>
      <div class="steps-content" v-if="current == 1 ? true : false">
        <select-tree-area @checkData="areaSelect" style="margin-right: 20px" />
        <a-input-search
          style="width: 200px; margin-right: 20px"
          :placeholder="$t('m.WhetherToDisplayChildNodes')"
          v-model="forminitialC.key"
          enter-button
          @search="onSearchA"
        />
        <a-checkbox @change="checkChange">
          {{ $t("m.WhetherToDisplayChildNodes") }}
        </a-checkbox>
        <vxe-table
          style="margin-top: 20px"
          resizable
          :tree-config="{
            transform: true,
            rowField: 'id',
            parentField: 'parentId',
          }"
          
          :data="data"
          :checkbox-config="{ labelField: 'devname', highlight: true }"
          @checkbox-change="selectChangeEvent"
        >
          <vxe-column
            type="checkbox"
            :title="$t('m.Controller')"
            width="280"
            tree-node
          ></vxe-column>
          <vxe-column field="timeInterval" :title="$t('m.Period')"></vxe-column>
          <vxe-column field="weekvalue" :title="$t('m.openDay')"></vxe-column>
          <vxe-column field="areaname" :title="$t('m.Location')"></vxe-column>
        </vxe-table>
      </div>
      <div class="steps-content" v-if="current == 2 ? true : false">
        <h3>{{ $t("m.periodofvalidity") }}</h3>
        <a-range-picker
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          :placeholder="['Start Time', 'End Time']"
          @change="pickerChange"
          @ok="pickerOk"
        />
      </div>
      <div class="steps-action">
        <a-button
          v-if="current < steps.length - 1"
          type="primary"
          @click="next"
        >
          {{$t('m.Next')}}
        </a-button>
        <a-button
          v-if="current == steps.length - 1"
          type="primary"
          @click="stepOk"
        >
          {{$t('m.Done')}}
        </a-button>
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
          {{$t('m.Previous')}}
        </a-button>
      </div>
    </a-modal>

    <Delete ref="xiazai" :dalete="xiazai" @confirm="reset"></Delete>
    <Delete ref="del" :dalete="delAll" @confirm="delAItem"></Delete>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Modal from "@/components/common/Modal";
import Delete from "@/components/Delete";
import { getPerages } from "@/api/perAges";
import { getStaffOrStudInfoList } from "@/api/faceRecognition";
import SelectTree from "@/components/common/SelectTree";
import SelectTreeArea from "@/components/common/SelectTreeArea";
import difference from "lodash/difference";
import {
  getWidgetDictionaryList,
  getAuthorizeList,
  reDownload,
  delAuthorize,
  getDeviceTimeList,
  saveAuthorize,
} from "@/api/entrance/cloudDoor";
// import { getWidgetDictionaryList } from "../../../../api/dictionaries";

export default {
  name: "Roster",
  components: {
    Headline,
    Delete,
    SelectTree,
    SelectTreeArea,
  },
  computed: {
    propList() {
      return Object.keys(this.props).map((item) => ({
        name: item,
      }));
    },
  },
  data() {
    return {
      ipagination:{
        defaultPageSize:5,
        pageSizeOptions:['5','10','20'],
        showSizeChanger:true,
        // showQuickJumper:true,
        onShowSizeChange: this.pageSizeChange,
        onChange: this.pageChange,
        total:0
      },
      Rightipagination:{
         defaultPageSize:5,
      },
      tableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Developer",
          sex: "Man",
          address: "Address abc123",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Developer",
          sex: "Female",
          address: "Address rttry",
        },
        {
          id: 10003,
          name: "Test3",
          role: "Developer",
          sex: "Man",
          address: "Address xxxxx",
        },
      ],
      fields: [
        {
          title: this.$t("m.Controller"),
          id: "devname",
          width: "200px",
        },
        {
          title: this.$t("m.Period"),
          id: "children",
          type: "template",
          minWidth: "50px",
          template: "likes",
        },
        {
          title: this.$t("m.openDay"),
          id: "score",
        },
        {
          title: this.$t("m.Location"),
          id: "areaname",
          minWidth: "200px",
        },
      ],
      data: [],
      xiazai: {
        titles: this.$t("m.DownloadPrompt"),
        type: "warning",
        text: this.$t("m.AreYouSureToReDownload"),
      },
      delAll: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "warning",
        text: this.$t("m.DeleteThePrompt"),
      },
      visibleB: false,
      selectData: [],
      value: "",
      mockData: [],
      formationDel: {
        ids: "",
        infoIds: "",
      },
      targetKeys: [],
      selectedKeys: [],
      showSearch: false,
      disabled: false,
      leftColumns: [
        {
          title: this.$t("m.jobnumber"),
          dataIndex: "stafforstucode",
        },
        {
          title: this.$t("m.Name"),
          dataIndex: "stafforstuname",
        },
        {
          title: this.$t("m.Sex"),
          dataIndex: "sex",
          customRender: function (text) {
            if (text == "1") {
              return "男";
            } else {
              return "女";
            }
          },
        },
        {
          title: this.$t("m.CardNumber"),
          dataIndex: "cardno",
        },
        {
          title: this.$t("m.AffiliatedUnit"),
          dataIndex: "orgname",
        },
      ],
      rightColumns: [
        {
          dataIndex: "stafforstuname",
          title: this.$t("m.Name"),
        },
      ],
      items: [],
      formunitdata: {
        orgType: "1",
        key: "",
      },
      fostlist: {
        downStatus: "-1",
        orgCode: "",
        key: "",
        vChild: true,
        start: 0,
        limit: 10,
        page: 1,
      },
      formation: {
        groupcode: "SYS0000019",
        where: "code<> -1 and code <> -100",
      },
      fromdic: {
        groupcode: "SYS0000025",
        insertall: "-1|全部",
        where: "code<> -1 and code <> -100",
      },
      diction: [],
      setsclete: [],
      // 配置数据
      column: [
        {
          title: this.$t("m.DownloadStatus"),
          dataIndex: "statusname",
        },
        {
          title: this.$t("m.jobnumber"),
          dataIndex: "stafforstucode",
        },
        {
          title: this.$t("m.Name"),
          dataIndex: "stafforstuname",
        },
        {
          title: this.$t("m.CardNumber"),
          dataIndex: "cardno",
        },
        {
          title: this.$t("m.deviceNumber"),
          dataIndex: "machineid",
        },
        {
          title: this.$t("m.EquipmentName"),
          dataIndex: "devname",
        },

        {
          title: this.$t("m.TimeSerialNumber"),
          dataIndex: "timezones",
        },
        {
          title: this.$t("m.Start"),
          dataIndex: "starttime",
        },
        {
          title: this.$t("m.End"),
          dataIndex: "endtime",
        },
        {
          title: this.$t("m.processingTime"),
          dataIndex: "enddate",
        },
        {
          title: this.$t("m.ProcessingTimes"),
          dataIndex: "downnum",
        },
        {
          title: this.$t("m.theResults"),
          dataIndex: "stafforstudinfoid",
        },
        {
          title: this.$t("m.Operation"),
          key: "tags",
          // dataIndex: "address",
          scopedSlots: { customRender: "tags" },
        },
      ],
      forminitialB: {
        start: 0,
        limit: 5,
        page: 1,
        key: "",
        infoType: 1,
        status: 1,
        vChild: false,
        ymOrgTreeCode: "",
      },
      datas: [],
      total: 0,
      dalete: {
        titles: this.$t("m.DownloadPrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToReDownload"),
      },
      ids: "",
      current: 0,
      steps: [
        {
          title: "First",
          content: "First-content",
        },
        {
          title: "Second",
          content: "Second-content",
        },
        {
          title: "Last",
          content: "Last-content",
        },
      ],
      forminitialC: {
        areaCode: "",
        vChild: false,
        page: 1,
        start: 0,
        limit: 50,
        key: "",
      },
      forminitialD: {
        infoId: "",
        devData: [],
        startTime: "",
        endTime: "",
      },
      devList: [],
    };
  },
  created() {
    // 请求数据
    this._getPerages();
    this._getWidgetDictionaryList();
    getWidgetDictionaryList({ params: this.formation })
      .then((res) => {
        console.log(res.data.data);
        this.selectData = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
    this.chend();
    // getPerages({params:{orgType:1}})
    // .then(res => {
    //   this.forminitialB.ymOrgTreeCode = res.data[0].ymorgtreecode
    // })
    // .catch(err => {
    //   console.log(err)
    // })
    this._getDeviceTimeList();
  },
  methods: {
    pageSizeChange(val, pageNum){
      console.log(val, pageNum)
      this.forminitialB.limit = pageNum
      this.forminitialB.page = val
      this.forminitialB.start = pageNum*(val-1)
      this.getStaffOrStudInfoData ()
     
    },
    pageChange(page, val){
      this.forminitialB.page = page
      this.forminitialB.limit = val
      this.forminitialB.start = (page - 1) * val
      this.getStaffOrStudInfoData()
      console.log(page,val)

    },
    pickerChange(e) {
      this.forminitialD.startTime = this.$moment(e[0]._d).format(
        "YYYY-MM-DD hh:mm:ss"
      );
      this.forminitialD.endTime = this.$moment(e[1]._d).format(
        "YYYY-MM-DD hh:mm:ss"
      );
      console.log(this.forminitialD);
    },
    pickerOk(e) {
      console.log(e);
    },
    checkChange(e) {
      this.forminitialC.vChild = e.target.checked;
      this._getDeviceTimeList();
      console.log(e);
    },
    onSearchA() {
      this._getDeviceTimeList();
    },
    selectChangeEvent({ records }) {
      // let demo = {devId:'',timezones:''}
      let devList = [];
      let devInfo = { devId: "", timezones: "" };
      console.log(records);
      let dataList = [];
      let exa = [
        "周日",
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
        "假日",
      ];
      records.forEach((item) => {
        if (item.children.length !== 0) {
          //   this.devList.push(item)
          devList.push(item);
        }
        // console.log(devList)
      });
      console.log(devList);
      devList.forEach((citem) => {
        let num = [];
        for (let index = 0; index < 16; index++) {
          if (index > citem.children.length - 1) {
            num.push(0);
          } else {
            num.push(1);
          }
        }
        // devInfo.devId = citem.id
        dataList.push({ devId: citem.id, timezones: num.join(",") });
      });
      // console.log(dataList)
      // dataList.forEach(item => {
      //   this.forminitialD.devData.push(item)
      // })
      this.forminitialD.devData = JSON.stringify(dataList);
    },
    _getDeviceTimeList() {
      getDeviceTimeList({ params: this.forminitialC })
        .then((res) => {
          res.data.forEach((item) => {
            item.parentId = null;
            for (let index = 0; index < item.children.length; index++) {
              item.children[index]["devname"] = "时段方案" + (index + 1);
            }
          });

          res.data.forEach((item) => {
            for (let index = 0; index < item.children.length; index++) {
              item.children[index]["parentId"] = item.id;
              res.data.push(item.children[index]);
            }
          });
          res.data.forEach((item) => {
            if (item.starttime) {
              item["timeInterval"] = item.starttime + "-" + item.endtime;
            }
            if (item.weekvalue) {
              let demo = item.weekvalue.split(",");
              let day = [];
              for (let index = 0; index < demo.length; index++) {
                if (demo[0] == 1) {
                  day.push("周日");
                }
                if (demo[1] == 1) {
                  day.push("周一");
                }
                if (demo[2] == 1) {
                  day.push("周二");
                }
                if (demo[3] == 1) {
                  day.push("周三");
                }
                if (demo[4] == 1) {
                  day.push("周四");
                }
                if (demo[5] == 1) {
                  day.push("周五");
                }
                if (demo[6] == 1) {
                  day.push("周六");
                }
                if (demo[7] == 1) {
                  day.push("假日");
                }
                break;
              }
              item.weekvalue = day;
            }
          });
          this.data = res.data;
          console.log(this.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    areaSelect(e) {
      this.forminitialC.areaCode = e.areacode;
      this._getDeviceTimeList();
      console.log(e);
    },
    delAItem() {
      let ids = [];
      let infoIds = [];
      this.setsclete.forEach((item) => {
        this.datas.forEach((citem) => {
          if (item == citem.authorizeid) {
            ids.push(citem.authorizeid);
            infoIds.push(citem.stafforstudinfoid);
          }
        });
      });
      this.formationDel.ids = ids.join(",");
      this.formationDel.infoIds = infoIds.join(",");
      delAuthorize(this.formationDel)
        .then((res) => {
          if (res.data.success == true) {
            this.chend();
            this.$message.success(res.data.msg);
          } else {
            this.$message.warning(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败");
          console.log(err);
        });
      console.log(this.setsclete);
    },
    delbtn() {
      if (this.setsclete.length <= 0)
        return this.$message.warning("请选择需要下载的记录");
      this.$refs.del.visible = true;
    },
    treeChange(e) {
      this.forminitialB.infoType = e;
      this.getStaffOrStudInfoData();
      console.log(e);
    },
    onSearchB() {
      this.getStaffOrStudInfoData();
    },
    onChangeA(e) {
      console.log(e.target.checked);
      this.forminitialB.vChild = e.target.checked;
      this.getStaffOrStudInfoData();
    },
    onChange(targetKeys, direction, moveKeys) {
      console.log(this.mockData);
      console.log(targetKeys);
      this.targetKeys = targetKeys;
    },

    triggerShowSearch(showSearch) {
      this.showSearch = showSearch;
    },
    getRowSelection({ selectedKeys, itemSelectAll, itemSelect }) {
      return {
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter((item) => !item.disabled)
            .map(({ key }) => key);
          const diffKeys = selected
            ? difference(treeSelectedKeys, selectedKeys)
            : difference(selectedKeys, treeSelectedKeys);
          itemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          // console.log(key)
          itemSelect(key, selected);
        },
        selectedRowKeys: selectedKeys,
      };
    },
    changeTree(e) {
      this.forminitialB.ymOrgTreeCode = e.ymorgtreecode;
      this.getStaffOrStudInfoData();
      console.log(e);
    },
    getStaffOrStudInfoData() {
      getStaffOrStudInfoList({ params: this.forminitialB })
        .then((res) => {
          this.ipagination.total = res.data.total
          this.mockData = res.data.data.map((item) => {
            return {
              key: item.id + "",
              infotype: item.infotype,
              orgname: item.orgname,
              property: item.property,
              sex: item.sex,
              stafforstucode: item.stafforstucode,
              stafforstuname: item.stafforstuname,
              ymorgid: item.ymorgid,
              status: item.status,
              ymorgtreecode: item.ymorgtreecode,
            };
          });
          this.dataC = res.data.data;
          // this.totalC = res.data.total
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    next() {
      if (this.targetKeys.length <= 0)
        return this.$message.warning("请选择人员信息");
      console.log(this.targetKeys);
      this.forminitialD.infoId = this.targetKeys.join(",");

      this.current++;
    },
    prev() {
      this.current--;
    },
    stepOk() {
      saveAuthorize(this.forminitialD)
        .then((res) => {
          if (res.data.success == true) {
            this.$message.success(res.data.msg);
            this.chend();
          } else {
            this.$message.warning(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败");
        });
      this.current = 0;
      this.visibleB = false;
      this.targetKeys = [];
      this.forminitialD.infoId = "";
      this.forminitialD.devData = [];
    },
    handleCancelB() {
      this.visibleB = false;
      this.current = 0;
      this.targetKeys = [];
      this.forminitialD.infoId = "";
      this.forminitialD.devData = [];
    },
    addbtn() {
      this.getStaffOrStudInfoData();
      this.visibleB = true;
    },
    reset() {
      reDownload(this.ids)
        .then((res) => {
          if (res.data.success == true) {
            this.$message.success(res.data.msg);
          } else {
            this.$message.warning(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败");
        });
      this.$refs.xiazai.visible = false;
      console.log(this.ids);
    },
    downbtn() {
      if (this.setsclete.length <= 0)
        return this.$message.warning("请选择需要下载的记录");
      this.$refs.xiazai.visible = true;
    },
    //获取字典
    _getWidgetDictionaryList() {
      getWidgetDictionaryList({ params: this.fromdic }).then((res) => {
        console.log(res);
        this.diction = res.data.data;
      });
    },
    _getPerages() {
      getPerages({ params: this.formunitdata })
        .then((res) => {
          this.forminitialB.ymOrgTreeCode = res.data[0].ymorgtreecode;
          console.log(res);
          if (res.data) {
            this.items = res.data;
            this.$message.success("获取数据成功");
          }
        })
        .catch((err) => {
          // this.$message.error("获取数据失败");
        });
    },
    chend() {
      getAuthorizeList({ params: this.fostlist }).then((res) => {
        console.log(res);
        this.total = res.data.total;
        this.datas = res.data.data;
        console.log(this.datas);
      });
    },
    //tree选中
    checked(value, label, extra) {
      console.log(extra.triggerNode.$attrs.cont);
      //判断是否选中值了
      if (extra.triggerNode) {
        //获取当前选中的对象信息
        const cont = extra.triggerNode.$attrs.cont;
        this.fostlist.orgCode = cont.ymorgtreecode;
        this.chend();
      }
    },
    //下拉选中执行
    handleSelectChange(e) {
      console.log(e);
      this.formunitdata.orgType = e;
      this._getPerages();
    },
    //搜索
    offSearch() {
      this.chend();
    },
    offSelectChange() {
      this.chend();
    },

    //确定
    ondelete() {
      getreDownload({ ids: this.ids })
        .then((res) => {
          const msg = res.data.msg;
          if (res.data.success) {
            this.$message.success(msg);
          } else {
            this.$message.error(msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.$refs.delete.visible = false;
    },
    //表单选中
    perSelectChange(select, text) {
      console.log(select);
      this.setsclete = select;
      let str = select.join(",");
      this.ids = str;
    },
    //子节点
    lineChange() {
      this.fostlist.vChild = !this.fostlist.vChild;
      this.chend();
    },

    // 分页操作功能
    setShowSizeChange(page, limit) {
      this.fostlist.page = page;
      this.fostlist.limit = limit;
      this.fostlist.start = (page - 1) * limit;
      this._getDeviceList();
    },
    setPages(page, pageSize) {
      this.fostlist.page = page;
      this.fostlist.limit = pageSize;
      this.fostlist.start = (page - 1) * pageSize;
      this._getDeviceList();
    },
  },
};
</script>

<style>
.lass-flex {
  display: flex;
  align-items: center;
}
.select-a {
  width: 100px;
}
.chend {
  margin-left: 15px;
}
.btn-dispos {
  margin-left: 15px;
}
</style>